<template>
	<view class="page" v-if="status === 1 ">
		<view class="p-top">
			<view class="flex-col group_2 space-y-22">
				<view class="flex-col section space-y-57">
					<view class="flex-col items-start space-y-33">
						<text class="font_1">今日交易额</text>
						<text class="text_3 clamp">{{info.today_jiaoyie || 0}}</text>
					</view>
					<view class="flex-col">
						<view class="flex-row justify-between">
							<text class="font_1">今日订单数</text>
							<text class="font_1 text_4">累计交易额</text>
						</view>
						<view class="flex-row justify-between items-end">
							<text class="font_2 text_5" style="flex:1;">{{info.today_order_count || 0}}</text>
							<view class="shrink-0 self-center section_2"></view>
							<view class="flex-row group_3 space-x-59 justify-center" style="flex:1;">
								<text class="self-start font_2 text_6 clamp">{{info.leiji_jiaoyie || 0}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-row justify-center items-center relative section_3">
					<text class="font_3 pos">待取车({{info.daiquche || 0}})</text>
					<view class="section_4"></view>
					<text class="font_3 pos_2">逾期订单({{info.yuqi || 0}})</text>
				</view>
			</view>
		</view>
		<!--  @click="testUpload" -->
		<view class="p-title">
			常用功能
		</view>
		<view class="grid p-entry">
			<view class="flex-col items-center grid-item space-y-25 order-manage"
				@click="navTo('/pages/order/orders/index')">
				<image class="image_3" src="/static/index-order.png" />
				<text class="font_4">订单管理</text>
				<view class="dot" v-if="info.order_unread && info.order_unread>0"></view>
			</view>
			<view class="flex-col items-center grid-item space-y-25" @click="navTo('/pages/car/cars/index')">
				<image class="image_3" src="/static/index-car.png" />
				<text class="font_4">车辆管理</text>
			</view>
			<view class="flex-col items-center grid-item space-y-25" @click="navTo('/pages/coupon/coupons/index')">
				<image class="image_3" src="/static/index-coupon.png" />
				<text class="font_4">优惠券管理</text>
			</view>
			<view class="flex-col items-center grid-item space-y-25" @click="navTo('/pages/door/doors/index')">
				<image class="image_3" src="/static/index-door.png" />
				<text class="font_4">门店管理</text>
			</view>
			<view class="flex-col items-center grid-item space-y-25" @click="navTo('/pages/center/center')">
				<image class="image_3" src="/static/index-center.png" />
				<text class="font_4">商家中心</text>
			</view>
			<view class="flex-col items-center grid-item space-y-25" @click="navTo('/pages/Freezemerchant/index')">
				<image class="image_3" src="/static/mianya.png" />
				<text class="font_4">申请免押</text>
			</view>
		</view>
	</view>
</template>
<script lang="ts">
	import {
		reactive,
		toRefs,
		defineComponent,
		nextTick,
		// ref,
		// watchEffect,
	} from 'vue';
	import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	const apply = defineComponent({
		setup(props : any, ctx : any) {
			const data = reactive({
				status: -1, //1鉴权成功
				info: {},
			})
			onShow(async () => {
				if (data.status !== 1) {
					let userInfo = await uni.$store.dispatch('user/getinfo')
					if (!userInfo || userInfo.status !== 1) {
						uni.removeStorage({
							key: "token"
						})
						uni.$this.navTo('/pages/login/login', {}, { type: 'replaceAll' })
						return;
					}
					// else if(userInfo.status !== 1 ){
					// 	uni.$this.navTo('/pages/login/apply',{},{type:'replaceAll'})
					// 	return;
					// }
					data.status = 1;
				}
				getInfo();
			})
			onPullDownRefresh(() => {
				getInfo();
				nextTick(() => {
					uni.stopPullDownRefresh();
				})
			})
			const getInfo = async () => {
				let res = await uni.$request('index.index');
				data.info = res.data;
			}

			// const testUpload = async ()=>{
			// 	const fullurl = await uni.$tools.uploadVideo();
			// 	console.log("testUpload====",fullurl)
			// 	uni.showModal({
			// 		title:'提示',
			// 		content: fullurl
			// 	})
			// }

			return {
				...toRefs(data),
				// testUpload,
			};
		}
	})
	export default apply;
</script>

<style lang="scss">
	.order-manage {
		position: relative;

		.dot {
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			position: absolute;
			top: -10rpx;
			right: 30%;
			z-index: 2;
			background-color: #E62019;
		}
	}

	page {
		background-color: #fff;
	}

	.page {
		padding-top: 30rpx;
	}

	.p-top {
		.group_2 {
			padding: 0 19rpx;

			.section {
				padding: 38rpx 40rpx 29rpx;
				background-color: #256ae5;
				box-shadow: 0px 10rpx 10rpx #7f7f7f33;
				border-radius: 10rpx;

				.space-y-33 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 33rpx;
					}

					.text_3 {
						color: #ffffff;
						font-size: 54rpx;
						font-family: PingFang;
					}
				}

				.font_1 {
					font-size: 24rpx;
					font-family: PingFang;
					color: #ffffff;
				}

				.text_4 {
					margin-right: 100rpx;
				}

				.font_2 {
					font-size: 30rpx;
					font-family: PingFang;
					color: #ffffff;
				}

				.section_2 {
					opacity: 0.5;
					background-color: #ffffff;
					width: 2rpx;
					height: 39rpx;
					border: solid 2rpx #e9e9e9;
				}

				.group_3 {

					// margin-right: 92rpx;
					.text_6 {
						margin-top: 22rpx;
						max-width: 200rpx;
					}
				}

				.space-x-59 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 59rpx;
					}
				}
			}

			.space-y-57 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 57rpx;
				}
			}

			.section_3 {
				padding: 24rpx 96rpx;
				background-color: #ffffff;
				box-shadow: 0px 0px 10rpx #7f7f7f33;
				border-radius: 10rpx;
				border: solid 2rpx #e9e9e9;

				.font_3 {
					font-size: 30rpx;
					font-family: PingFang;
					color: #333333;
				}

				.pos {
					position: absolute;
					left: 97rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.section_4 {
					background-color: #ffffff;
					width: 2rpx;
					height: 67rpx;
					border: solid 2rpx #e9e9e9;
				}

				.pos_2 {
					position: absolute;
					right: 105rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.space-y-22 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 22rpx;
			}
		}
	}

	.p-entry,
	.grid {
		height: 312rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		.grid-item {
			padding: 30rpx 0;

			.image_3 {
				width: 48rpx;
				height: 48rpx;
			}

			.font_4 {
				font-size: 26rpx;
				font-family: PingFang;
				color: #333333;
			}
		}

		.space-y-25 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 25rpx;
			}
		}
	}

	.p-title {
		margin-top: 50rpx;
		margin-bottom: 40rpx;
		padding: 0 22rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
</style>